<template>
  <view class="content pt-30 pb-50 pl-20 pr-20">
    <view class="detail-block pd-20">
      <view style="display: flex;">
        <view class="title-block">核查信息</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">隐患名称</view>
        <view class="item-value">{{detail.htName ? detail.htName : '-'}}</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">隐患等级</view>
        <view class="item-value">{{detail.levelName ? detail.levelName : '-'}}</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">隐患描述</view>
        <view class="item-value">{{detail.description ? detail.description : '-'}}</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">检查单位</view>
        <view class="item-value">{{detail.checkDept ? detail.checkDept : '-'}}</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">检查人</view>
        <view class="item-value">{{detail.checkPeo ? detail.checkPeo : '-'}}</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">检查类型</view>
        <view class="item-value">{{detail.checkType ? checkTypeJson[detail.checkType] : '-'}}</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">隐患地点</view>
        <view class="item-value">{{detail.place ? detail.place : '-'}}</view>
      </view>
      <!-- <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">检查人</view>
        <view class="item-value">{{detail.checkPeo ? detail.checkPeo : '-'}}</view>
      </view> -->
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">所属风险点</view>
        <view class="item-value">{{detail.riskPoint ? detail.riskPoint : ''}}</view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">所属单位</view>
        <view class="item-value">{{detail.beCheckDept ? detail.beCheckDept : '-'}}</view>
      </view>
      <view class="item-block pt-20 border-b-common">
        <view class="item-label">整改前图片</view>
        <view class="image-list">
          <image v-for="(item, index) in detail.ossImg" :key="index" class="image" mode="aspectFill" :src="item.url" @click="previewImage(item.url)"></image>
        </view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">整改方式</view>
        <view class="item-radio">
          <u-radio-group v-model="params.rectificationType" size="32rpx" labelSize="28rpx" placement="row" :disabled="detail.source == 0 ?false:true">
            <u-radio value="0" name="0" activeColor="#3F99F7" label="立即整改"></u-radio>
            <u-radio value="1" name="1" activeColor="#3F99F7" label="限期整改"></u-radio>
          </u-radio-group>
        </view>
      </view>
      <view v-if="params.rectificationType == 1" class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">整改期限</view>
        <view class="item-select" @click="() => calendarState = true">
          <text v-if="params.rectificationLimit" class="mr-10">{{params.rectificationLimit}}</text>
          <text v-else class="item-default-text mr-10">请选择整改期限</text>
          <u-icon name="calendar" size="46rpx" color="#3F99F7"></u-icon>
        </view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">整改责任单位</view>
        <!-- <view class="item-select" @click="() => rectificationDeptIdState = true"> -->
        <view class="item-select" @click="routeByUrl('/pagesCommon/departmentList?paramsKey=rectification')">
          <text v-if="params.rectificationDeptIdName" class="mr-10">{{params.rectificationDeptIdName}}</text>
          <text v-else class="item-default-text mr-10">请选择整改责任单位</text>
          <u-icon name="arrow-right" size="26rpx" color="#CCCCCC"></u-icon>
        </view>
      </view>
      <view class="item-block pt-20 pb-20">
        <view class="item-label">整改责任人</view>
        <!-- <view class="item-select" @click="() => rectificationPeoIdState = true"> -->
        <view class="item-select" @click="routeByUrl('/pagesCommon/departmentList?paramsKey=rectification')">
          <text v-if="params.rectificationPeoIdName" class="mr-10">{{params.rectificationPeoIdName}}</text>
          <text v-else class="item-default-text mr-10">请选择整改责任人</text>
          <u-icon name="arrow-right" size="26rpx" color="#CCCCCC"></u-icon>
        </view>
      </view>
      <view class="item-block pt-20 pb-20 border-b-common">
        <view class="item-label">验收责任单位</view>
        <view class="item-select" @click="routeByUrl('/pagesCommon/departmentList?paramsKey=cancel')">
          <text v-if="params.cancelDeptIdName" class="mr-10">{{params.cancelDeptIdName}}</text>
          <text v-else class="item-default-text mr-10">请选择验收责任单位</text>
          <u-icon name="arrow-right" size="26rpx" color="#CCCCCC"></u-icon>
        </view>
      </view>
      <view class="item-block pt-20 pb-20">
        <view class="item-label">验收责任人</view>
        <view class="item-select" @click="routeByUrl('/pagesCommon/departmentList?paramsKey=cancel')">
          <text v-if="params.cancelPeoIdName" class="mr-10">{{params.cancelPeoIdName}}</text>
          <text v-else class="item-default-text mr-10">请选择验收责任人</text>
          <u-icon name="arrow-right" size="26rpx" color="#CCCCCC"></u-icon>
        </view>
      </view>
    </view>
    <view class="detail-block pd-20 mt-30">
      <view class="mb-20" style="display: flex;">
        <view class="title-block">整改措施</view>
      </view>
      <view>
        <textarea class="text-area pd-20" placeholder="请输入整改措施" v-model="params.rectificationMeasure" placeholder-class="placeholder"></textarea>
      </view>
    </view>
    <view class="button-block mt-30">
      <u-button type="info" text="取消" :custom-style="{width: '340rpx', backgroundColor: '#FFFFFF !important'}" @click="routeBack()"></u-button>
      <u-button type="primary" text="确认" :custom-style="{width: '340rpx'}" @click="submit"></u-button>
    </view>
    <u-calendar :show="calendarState" mode="single" color="#3F99F7" :closeOnClickOverlay="true" @confirm="calendarConfirm" @close="calendarClose"></u-calendar>
    <u-picker :show="rectificationPeoIdState" :columns="rectificationPeoList" keyName="label" @confirm="pickerConfirm('rectificationPeoId', $event)" @cancel="pickerCancel('rectificationPeoId')"></u-picker>
    <u-picker :show="rectificationDeptIdState" :columns="rectificationDeptList" keyName="label" @confirm="pickerConfirm('rectificationDeptId', $event)" @cancel="pickerCancel('rectificationDeptId')"></u-picker>
  </view>
</template>

<script>
  import { getCheckDetailApi, updateCheckInfoApi } from '@/apis/danger/index.js'
  import { getUserDictListApi, getDeptDictListApi } from '@/apis/danger/common.js'
  import checkTypeJson from '@/static/json/checkType.json'
  import dayjs from 'dayjs'
  
  export default {
    data() {
      return {
        checkTypeJson,
        calendarState: false,
        params: {
          rectificationType: '',
          rectificationLimit: '',
          rectificationPeoId: '',
          rectificationPeoIdName: '',
          rectificationDeptId: '',
          rectificationDeptIdName: '',
          rectificationMeasure: '',
          cancelDeptIdName: '',
          cancelDeptId: '',
          cancelPeoIdName: '',
          cancelPeoId: ''
        },
        detail: {},
        rectificationPeoIdState: false,
        rectificationPeoList: [],
        rectificationDeptIdState: false,
        rectificationDeptList: []
      }
    },
    onLoad(options) {
      this.getDeptDictList()
      if(options.id) this.getCheckDetail({id: options.id})
    },
    methods: {
      getCheckDetail: function(params) {
        getCheckDetailApi(params).then(res => {
          this.detail = res
          this.params.cancelDeptIdName = this.detail.cancelDept
          this.params.cancelDeptId = this.detail.cancelDeptId
          this.params.cancelPeoIdName = this.detail.cancelPeo
          this.params.cancelPeoId = this.detail.cancelPeoId
          this.params.rectificationLimit = this.detail.rectificationLimit
          this.params.rectificationType = this.detail.rectificationType
        }).catch(err => console.warn(err))
      },
      submit: function() {
        if(this.params.rectificationType == 0){
          var time = dayjs().format('YYYY-MM-DD') +' 23:59:59'
          console.log(time)
          this.params.rectificationLimit = time
        }
        if(!this.authFormData()) return false
        let params = this.params
        Object.assign(params, {id: this.detail.id, htId: this.detail.htId})
        updateCheckInfoApi(params).then(res => {
          setTimeout(() => uni.navigateBack(), 500)
        }).catch(err => console.warn(err))
      },
      getDeptDictList: function() {
        getDeptDictListApi({parentId: 1002}).then(res => {
          if(res.length > 0) res.map(item => Object.assign(item, {label: item.name, value: item.id}))
          this.rectificationDeptList = [res]
        }).catch(err => console.warn(err))
      },
      getUserDictList: function(params) {
        getUserDictListApi(params).then(res => {
          if(res.length > 0) res.map(item => Object.assign(item, {label: item.nickname, value: item.id}))
          this.rectificationPeoList = [res]
        }).catch(err => console.warn(err))
      },
      pickerConfirm: function(type, event) {
        if(type == 'rectificationDeptId') {
          this.params.rectificationPeoId = ''
          this.params.rectificationPeoIdName = ''
          this.getUserDictList({ deptId: event.value[0].value })
        }
        this.params[type] = event.value[0].value
        this.params[`${type}Name`] = event.value[0].label
        this[`${type}State`] = false
      },
      pickerCancel: function(type) {
        this[`${type}State`] = false
      },
      calendarConfirm: function(event) {
        this.params.rectificationLimit = event[0] + " " + "23:59:59"
        this.calendarState = false
      },
      calendarClose: function() {
        this.calendarState = false
      },
      previewImage: function(url) {
        uni.previewImage({ urls: [url] })
      },
      routeByUrl: function(url) {
        uni.navigateTo({ url })
      },
      routeBack: function() {
        uni.navigateBack()
      },
      authFormData: function() {
        console.log(this.params)
        let params = this.params
        if(!params.rectificationType) {
          uni.showToast({ title: '请选择整改方式', icon: 'none' })
          return false
        }
        if(!params.rectificationLimit) {
          uni.showToast({ title: '请选择整改期限', icon: 'none' })
          return false
        }
        if(!params.rectificationDeptIdName) {
          uni.showToast({ title: '请选择整改责任单位', icon: 'none' })
          return false
        }
        if(!params.rectificationPeoIdName) {
          uni.showToast({ title: '请选择整改责任人', icon: 'none' })
          return false
        }
        if(!params.cancelDeptIdName) {
          uni.showToast({ title: '请选择验收责任单位', icon: 'none' })
          return false
        }
        if(!params.cancelPeoIdName) {
          uni.showToast({ title: '请选择验收责任人', icon: 'none' })
          return false
        }
        if(params.cancelPeoId == params.rectificationPeoId) {
          uni.showToast({ title: '整改责任人和验收责任人不可是同一人', icon: 'none' })
          return false
        }
        return true
      }
    }
  }
</script>

<style>
  page {
    background-color: #F4F4F4;
  }
  .u-radio:last-child {
    margin-left: 30rpx;
  }
  .u-radio__text {
    font-size: 28rpx !important;
    /* line-height: 42rpx !important; */
  }
  .u-button {
    background-color: #3F99F7 !important;
  }
</style>

<style lang="scss" scoped>
  .content {
    .detail-block {
      border-radius: 6rpx;
      background-color: #FFFFFF;
      .title-block {
        font-size: 30rpx;
        line-height: 42rpx;
        color: #222222;
        font-weight: 500;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, #C5DBFF 50%, #C5DBFF);
      }
      .item-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item-label {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
        }
        .item-value {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #999999;
          max-width: 500rpx;
        }
        .item-select {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
          .item-default-text {
            color: #999999;
          }
        }
        .image-list {
          max-width: 520rpx;
          display: flex;
          justify-content: flex-end;
          flex-direction: row-reverse;
          flex-wrap: wrap;
          .image {
            width: 156rpx;
            height: 120rpx;
            border-radius: 6rpx;
            background-color: #CCCCCC;
            margin-left: 20rpx;
            margin-bottom: 20rpx;
          }
          .image:nth-child(3n) {
            margin-left: 0;
          }
        }
      }
      .text-area {
        width: 630rpx;    
        height: 300rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #333333;
        border: 1rpx solid #EEEEEE;
        border-radius: 6rpx;
      }
      .placeholder {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #999999;
      }
    }
    .button-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
